<template>
	<view class="container">
		<view class='head'>
			<image src='/static/assets/banner@2x.png' class='headImage'></image>
		</view>
		<view class='banner'>
			<view class='bannerInfo'>
				<text class='storj'>{{walletInfo.balanceAmount}}</text>
				<text class='rnb'>约{{walletInfo.valueAmount}}元</text>
				<button class='check' @tap='checkInfo'>点击查看明细</button>
			</view>
			<view class='content'>
				<view class='contentItem'>
					<view class='item'>
						<view>昨日收益</view>
						<view>{{walletInfo.yesterdayProfitAmount == null ? '**' : walletInfo.yesterdayProfitAmount}}</view>
					</view>
					<view class='itemR'>
						<view>上周收益</view>
						<view>{{walletInfo.sevenDaysProfitAmount == null ? '**' : walletInfo.sevenDaysProfitAmount}}</view>
					</view>
				</view>
				<view class='contentItem'>
					<view class='item'>
						<view>星空收益排行</view>
						<view>{{walletInfo.profitTopIndex == null ? '**' : walletInfo.profitTopIndex}}</view>
					</view>
					<view class='itemR'>
						<view>累计收益</view>
						<view>{{walletInfo.totalProfitAmount == null ? '**' : walletInfo.totalProfitAmount}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class='qcodeHide' v-if="isPhoneShow">
			<view class='phoneContent'>
				<image src='/images/assets/cancel.png' class='cancelStyle' bindtap='cancelPhone'></image>
				<view class='tips'>
					<view class='phoneItemTitle'>绑定手机号码</view>
				</view>
				<view class='inputView'>
					<view class='inputArea'>
						<image src='/images/assets/phone.png' class='inputAreaPhone'></image>
						<input class='phoneInput' type='number' maxlength="11" placeholder=" 请输入手机号码" auto-focus bindinput="bindKeyInput" />
					</view>
					<view class='verifyArea'>
						<image src='/images/assets/yanzhengma.png' class='verifyAreaYan'></image>
						<input class='verifyInput' type='number' maxlength="6" placeholder=" 请输入验证码" bindinput="bindCodeInput" />
						<view class='verifyCode' catchtap='sendSmsAction'>{{countNum == 60 ? '发送验证码' : countNum + '(s)后重发'}}</view>
					</view>
					<view class='bind' bindtap='bindPhoneSure'>
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../common/apis.js'
	import message from '../../common/message.js'
	import util from '../../common/util.js'

	export default {
		data() {
			return {
				walletInfo: {},
				inviteUserId: null,
				isPhoneShow: false,
				phoneValue: null,
				verifyCode: null,
				countNum: 60
			}
		},
		onLoad(options) {
			if (
				options != null &&
				options != undefined &&
				options.scene != null &&
				options.scene > 0
			) {
				try {
					uni.setStorageSync('inviteUserId', options.scene);
				} catch (e) {
					console.log(e)
				}
			}

			if (
				options != null &&
				options != undefined &&
				options.inviteUserId != null &&
				options.inviteUserId > 0
			) {
				try {
					uni.setStorageSync('inviteUserId', options.inviteUserId);
				} catch (e) {
					console.log(e)
				}
			}

			if (
				options != null &&
				options != undefined &&
				options.scene != null &&
				options.scene > 0
			) {
				this.inviteUserId = options.scene
			}

			if (
				options != null &&
				options != undefined &&
				options.inviteUserId != null &&
				options.inviteUserId > 0
			) {
				this.inviteUserId = options.inviteUserId
			}

			try {
				const value = uni.getStorageSync('inviteUserId');
				if (value) {
					console.log(value);
					this.inviteUserId = value
				}
			} catch (e) {
				// error
			}


			if (this.inviteUserId) {
				this.bindRelationshipAPi();
			}

			this.loadWalletData();
		},
		methods: {
			loadWalletData() {
				let token = uni.getStorageSync("authorization");
				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: api.walletInfoApi,
					method: "GET",
					header: {
						Authorization: "Bearer " + token
					},
					success: res => {
						if (res.statusCode == '200') {
							this.walletInfo = res.data
							uni.hideLoading();
						} else {
							util.errHandler(res);
						}

					},

				});
			},
			////////邀请关系///////
			bindRelationshipAPi() {
				let token = '';
				try {
					const value = uni.getStorageSync('authorization');
					if (value) {
						console.log(value);
						token = value
					}
				} catch (e) {
					console.log(e)
				}

				let scene = "";

				if (this.inviteUserId) {
					scene = this.inviteUserId;
				}

				wx.request({
					url: api.relationshipAPi + "?scene=" + scene,
					method: "POST",
					header: {
						Authorization: "Bearer " + token
					},
					success(res) {
						if (res.statusCode == 200) {
							message.showInfo("邀约成功");
						} else {
							util.errHandler(res);
						}
					}
				});
			},
			//监听手机号码的输入
			bindKeyInput: function(e) {
				this.phoneValue = e.detail.value
			},
			//监听验证码的输入
			bindCodeInput: function(e) {
				this.verifyCode = e.detail.value
			},
			cancelPhone() {
				this.isPhoneShow = false
			},
			//发送验证码
			sendSmsAction: function() {
				if (!this.phoneValue) {
					uni.showToast({
						title: "手机号不能为空",
						icon: "",
						image: "/images/logo/warning.png",
						duration: 2000
					});
					return;
				}
				if (this.phoneValue.length != 11) {
					uni.showToast({
						title: "手机号不正确",
						icon: "",
						image: "/images/logo/warning.png",
						duration: 2000
					});
					return;
				}
				let param = {
					mobile: this.phoneValue
				};
				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: api.sendSmsCode,
					method: "POST",
					data: param,
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},

					success: res => {
						uni.hideLoading();
						message.showSuccess("验证码已发送");
						if (res.statusCode == "200") {
							let temp = setInterval(() => {
								if (this.countNum == 0) {
									this.countNum = 60
									if (
										this.intervalNum != null &&
										this.intervalNum != undefined
									) {
										clearInterval(this.intervalNum);
									}
								} else {
									let num2 = this.countNum;
									num2 -= 1;
									this.countNum = num2
								}
							}, 1000);

							this.intervalNum = temp
						} else {
							util.errHandler(res);
						}
					}
				});
			},
			bindPhoneSure() {
				if (!this.phoneValue) {
					uni.showToast({
						title: "手机号不能为空",
						icon: "",
						image: "/images/logo/warning.png",
						duration: 2000
					});
					return;
				}

				if (this.phoneValue.length != 11) {
					uni.showToast({
						title: "手机号不正确",
						icon: "",
						image: "/images/logo/warning.png",
						duration: 2000
					});
					return;
				}

				if (!this.verifyCode) {
					uni.showToast({
						title: "验证码不能为空",
						icon: "",
						image: "/images/logo/warning.png",
						duration: 2000
					});
					return;
				}

				let token = uni.getStorageSync("authorization");

				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: api.bindPhoneApi +
						"?mobile=" +
						this.phoneValue +
						"&smsCode=" +
						this.verifyCode,
					method: "POST",
					header: {
						Authorization: "Bearer " + token
					},
					success: res => {
						uni.hideLoading();
						if (res.statusCode == 200) {
							uni.title = "已绑定手机"
							this.phone = this.dataphoneValue
							this.isPhoneShow = false
							let token = res.data.id_token;
							try {
								uni.setStorageSync("authorization", token);
							} catch (e) {
								console.log(e);
							}
						} else {
							util.errHandler(res);
						}
					}
				});
			},

			checkInfo() {
				uni.navigateTo({
					url: "/pages/index/indexDetail"
				});
			}
		}
	}
</script>

<style>
	.head {
		width: 100%;
	}

	.headImage {
		width: 100%;
	}

	.banner {
		width: 100%;
		background: white;
	}

	.bannerInfo {
		text-align: center;
		display: flex;
		flex-direction: column;
		width: 269px;
		height: 132px;
		position: relative;
		top: -45px;
		left: 50%;
		margin-left: -134.5px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 3px 0px rgba(153, 153, 153, 0.5);
		border-radius: 8px;
	}

	.storj {
		margin-top: 10px;
		font-size: 30px;
		color: red;
	}

	.rnb {
		font-size: 14px;
	}

	.check {
		margin-top: 15px;
		font-size: 10px;
		width: 101px;
	}

	.content {
		width: 271px;
		margin: 0 auto;
	}

	.contentItem {
		display: flex;
		margin-bottom: 20px;
	}

	.item {
		width: 135px;
		padding: 10px 0;
		border-right: 1px solid rgba(0, 0, 0, 0.2);
	}

	.itemR {
		width: 135px;
		padding: 10px 0;
		text-align: right;
	}

	/* 绑定手机号码相关 */
	.qcodeHide {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(217, 217, 217, 0.9);
		height: 100%;
		z-index: 1000;
	}

	.phoneContent {
		position: relative;
		width: 347px;
		height: 308px;
		background: #fff;
		border-radius: 10px;
		margin: 14px auto;
		background-clip: padding-box;
		font-size: 16px;
		overflow: hidden;
		margin-top: 191px;
	}

	.cancelStyle {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 24px;
		height: 24px;
	}

	.phoneItemTitle {
		font-weight: bold;
		margin-top: 65px;
		margin-left: 32px;
		margin-bottom: 10px;
	}

	.phoneItemtip {
		font-weight: bold;
		font-size: 12px;
		margin-left: 32px;
		margin-bottom: 10px;
	}

	.inputView {
		width: 325px;
		margin: 0 auto;
		color: #999;
	}

	.inputArea {
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		display: flex;
		align-items: center;
		height: 45px;
	}

	.verifyArea {
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		display: flex;
		align-items: center;
		height: 45px;
	}

	.verifyAreaYan {
		margin-left: 40px;
		width: 23px;
		height: 23px;
	}

	.inputAreaPhone {
		margin-left: 40px;
		width: 23px;
		height: 23px;
	}

	.phoneInput {
		margin-left: 20px;
		height: 23px;
	}

	.verifyInput {
		margin-left: 20px;
		height: 23px;
		width: 150px;
	}

	.verifyCode {
		font-size: 14px;
		width: 85px;
		height: 20px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		text-align: center;
		color: #999;
	}

	.bind {
		position: absolute;
		bottom: 34px;
		left: 50%;
		margin-left: -110px;
		width: 220px;
		height: 24px;
		text-align: center;
		line-height: 24px;
		color: white;
		background: #366690;
		border-radius: 5px;
		font-size: 14px;
	}
</style>
